<template>
  <a-card 
    title="基本信息" 
    :bordered="true" 
    :body-style="{ padding: '20px' }"
  >
    <draggable 
      v-model="basicInfoItems" 
      tag="div"
      item-key="id"
      :group="{ name: 'basic', pull: 'clone', put: false }"
      :sort="true"
      @start="onDragStart" 
      @end="onDragEnd"
    >
      <template #item="{ element }">
        <div :key="element.id" style="margin-bottom: 16px;">
          <component 
            :is="element.component" 
            v-model:value="element.value" 
            :label="element.label"
            @update="updateItemValue"
            :item-id="element.id"
          />
        </div>
      </template>
    </draggable>
  </a-card>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import draggable from 'vuedraggable'
import NameItem from './NameItem.vue'
import GenderItem from './GenderItem.vue'
import AgeItem from './AgeItem.vue'
import PhoneItem from './PhoneItem.vue'

// 定义基本信息项
const basicInfoItems = ref([
  { id: 'name', label: '姓名', value: '尹志杰', component: NameItem },
  { id: 'gender', label: '性别', value: '男', component: GenderItem },
  { id: 'age', label: '年龄', value: '25', component: AgeItem },
  { id: 'phone', label: '手机', value: '123456', component: PhoneItem }
])

// 判断是否有内容显示
const hasContent = computed(() => {
  return basicInfoItems.value.some(item => item.value !== '')
})

// 更新项的值
const updateItemValue = (id: string, value: string) => {
  const item = basicInfoItems.value.find(item => item.id === id)
  if (item) {
    item.value = value
  }
}

// 拖拽事件处理
const onDragStart = (event: any) => {
  console.log('BasicInfo drag start', event)
}

const onDragEnd = (event: any) => {
  console.log('BasicInfo drag end', event)
}

// 定义暴露给父组件的属性和方法
defineExpose({
  items: basicInfoItems
})
</script>